<template>
  <div class="container">
    <div class="topCon">
      <el-row>
        <el-col class="topTitle">
          <div class="topTitleBox">
            <h2>
              <i class="icon iconfont iconfanhui1" @click="goBackOne"></i>
              {{
                caseInfo.complaintPerName
                  ? caseInfo.complaintPerName + '的欠薪诉求'
                  : '欠薪诉求详情'
              }}
              <span class="reRecord" v-if="caseInfo.isRepeatAppeal == 'YES'"
                >重复诉求</span
              >
              <span
                :class="
                  caseInfo.status == 'WAIT_ACCEPT'
                    ? 'during'
                    : caseInfo.status == 'ACCEPTING'
                    ? 'actioning'
                    : 'finished'
                "
                v-else
                >{{ caseInfo.statusDesc }}</span
              >
            </h2>
            <ul class="topTitleInfo">
              <li>
                <!-- <span :class="calcColor(caseInfo)!='GREEN'?(calcColor(caseInfo)==='YELLOW'?'dot yellow':'dot red'):'dot green'"></span> -->
                收件时间：{{ caseInfo.createTime }}
              </li>
            </ul>
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="spacing"></div>
    <div class="mainCon">
      <el-row class="infoContent">
        <el-col :span="9" class="info infoLeft">
          <p class="title">欠薪诉求信息</p>
          <div class="infoTitle">
            <div class="secondaryTitle secondaryTitleTheme">行业领域</div>
            <el-link
              icon="el-icon-edit"
              class="edit"
              type="primary"
              v-if="
                isShowUpdate &&
                caseInfo.status == 'ACCEPTING' &&
                !editFiled &&
                isPush !== 'YES'
              "
              @click="toEditFiled"
              >编辑</el-link
            >
          </div>
          <ul class="infoList" v-if="!editFiled">
            <li class="infoListItem">
              <p class="infoListItemInfo">
                {{ caseInfo.fieldTypeDesc ? caseInfo.fieldTypeDesc : '- -' }}
              </p>
            </li>
          </ul>
          <case-filed
            v-if="editFiled"
            @callback="callbackCaseFiled"
            :childData="caseInfo"
          />
          <div class="infoTitle">
            <div class="secondaryTitle secondaryTitleTheme">诉求类型</div>
            <el-link
              v-if="
                isShowUpdate &&
                caseInfo.status == 'ACCEPTING' &&
                !editType &&
                isPush !== 'YES'
              "
              icon="el-icon-edit"
              class="edit"
              type="primary"
              @click="toEditType"
              >编辑</el-link
            >
          </div>
          <ul class="infoList" v-if="!editType">
            <li class="infoListItem">
              是否重复诉求：<span class="infoListItemInfo">{{
                caseInfo.isRepeatAppeal == 'YES' ? '是' : '否'
              }}</span>
            </li>
            <li class="infoListItem" v-if="caseInfo.isRepeatAppeal == 'YES'">
              同诉求事件首条欠薪诉求：<span class="infoListItemInfo">{{
                caseInfo.repeatNum
              }}</span>
            </li>
          </ul>
          <case-type
            v-if="editType"
            :childData="caseInfo"
            @callback="callbackCaseType"
            :isES="true"
          ></case-type>
          <div class="infoTitle">
            <div class="secondaryTitle secondaryTitleTheme">被投诉单位</div>
            <el-link
              icon="el-icon-edit"
              v-if="
                isShowUpdate &&
                caseInfo.status == 'ACCEPTING' &&
                !editDepartment &&
                isPush !== 'YES'
              "
              class="edit"
              type="primary"
              @click="toEditDepartment"
              >编辑</el-link
            >
          </div>
          <ul class="infoList" v-if="!editDepartment">
            <li class="infoListItem">
              单位名称： {{ changeStringStyle(caseInfo.complaintName) }}
            </li>
            <li class="infoListItem">
              单位地址：<span class="infoListItemInfo">{{
                changeStringStyle(caseInfo.address)
              }}</span>
            </li>
            <li class="infoListItem" v-if="isHsUser() && activeName == 'PLAT'">
              详细地址：<span class="infoListItemInfo">{{
                changeStringStyle(caseInfo.addressDetail)
              }}</span>
            </li>
            <li class="infoListItem">
              负责人：<span class="infoListItemInfo">{{
                changeStringStyle(caseInfo.managerName)
              }}</span>
            </li>
            <li class="infoListItem">
              单位电话：<span class="infoListItemInfo">{{
                changeStringStyle(caseInfo.tel)
              }}</span>
            </li>

            <li class="infoListItem" v-if="isHsUser() && activeName == 'PLAT'">
              否是签订劳动合同：<span class="infoListItemInfo">{{
                changeStringStyle(caseInfo.isContract)
              }}</span>
            </li>
            <li class="infoListItem" v-if="isHsUser() && activeName == 'PLAT'">
              劳动合同用人单位名称：<span class="infoListItemInfo">{{
                changeStringStyle(caseInfo.contractCompany)
              }}</span>
            </li>
          </ul>
          <case-department
            @callback="callbackDepartment"
            v-if="caseInfo.status == 'ACCEPTING' && editDepartment"
            :childData="caseInfo"
          />
          <div class="infoTitle">
            <div class="secondaryTitle secondaryTitleTheme">反映人信息</div>
            <el-link
              icon="el-icon-edit"
              class="edit"
              type="primary"
              v-if="
                isShowUpdate &&
                caseInfo.status == 'ACCEPTING' &&
                !editPerson &&
                isPush !== 'YES'
              "
              @click="toEditPerson"
              >编辑</el-link
            >
          </div>
          <ul class="infoList" v-if="!editPerson">
            <li class="infoListItem">
              真实姓名：<span class="infoListItemInfo">{{
                changeStringStyle(caseInfo.name)
              }}</span>
            </li>
            <li class="infoListItem">
              联系电话：<span class="infoListItemInfo">{{
                changeStringStyle(caseInfo.perTel)
              }}</span>
            </li>
            <li class="infoListItem">
              身份证号：<span class="infoListItemInfo">{{
                changeStringStyle(caseInfo.idcard)
              }}</span>
            </li>
          </ul>
          <case-person
            v-if="editPerson"
            @callback="callbackCasePerson"
            :childData="caseInfo"
          />
          <div class="infoTitle">
            <div class="secondaryTitle secondaryTitleTheme">
              欠薪基本情况摘要
            </div>
            <el-link
              icon="el-icon-edit"
              class="edit"
              type="primary"
              v-if="
                isShowUpdate &&
                caseInfo.status == 'ACCEPTING' &&
                !editBase &&
                isPush !== 'YES'
              "
              @click="toEditBase"
              >编辑</el-link
            >
          </div>
          <ul class="infoList" v-if="!editBase">
            <li class="infoListItem">
              <p class="infoListItemInfo">
                {{ changeStringStyle(caseInfo.complaintRemark) }}
              </p>
            </li>
          </ul>
          <case-base
            v-if="editBase"
            @callback="callbackCaseBase"
            :childData="caseInfo"
          />
          <div class="infoTitle">
            <div class="secondaryTitle secondaryTitleTheme">其他</div>
            <el-link
              icon="el-icon-edit"
              class="edit"
              type="primary"
              v-if="
                isShowUpdate &&
                caseInfo.status == 'ACCEPTING' &&
                !editOther &&
                isPush !== 'YES'
              "
              @click="toEditOther"
              >编辑</el-link
            >
          </div>
          <ul class="infoList" v-if="!editOther">
            <li class="infoListItem">
              所在地区：<span v-if="caseInfo.cityName"
                >{{ caseInfo.cityName }}
                {{
                  caseInfo.countyName && caseInfo.countyName != '-'
                    ? '-' + caseInfo.countyName
                    : ''
                }}{{
                  caseInfo.streetName ? '-' + caseInfo.streetName : ''
                }}</span
              ><span v-else class="infoListItemNull">- -</span>
              <!-- 黄石大冶所在地区驳回 待受理,办理中,黄石 -->
              <el-button
                class="saveBtn edit1"
                type="primary"
                @click="changeArea"
                v-if="
                  isShowUpdate &&
                  (caseInfo.status == 'ACCEPTING' ||
                    caseInfo.status == 'WAIT_ACCEPT') &&
                  !editResolve &&
                  isPush !== 'YES' &&
                  isHsUser()
                "
                >所在地区驳回</el-button
              >
            </li>
            <li class="infoListItem">
              欠薪人数：<span class="infoListItemInfo">{{
                changeStringStyle(caseInfo.backPayCount)
              }}</span>
            </li>
            <li class="infoListItem">
              欠薪金额：<span class="infoListItemInfo">{{
                changeStringStyle(caseInfo.backPayTotal)
              }}</span>
            </li>
            <li class="infoListItem">
              欠薪始发时间：<span class="infoListItemInfo"
                ><span v-if="caseInfo.complaintYear">{{
                  caseInfo.complaintYear + '-' + caseInfo.complaintMonth
                }}</span>
                <span v-else class="infoListItemNull">- -</span></span
              >
            </li>
            <li class="infoListItem" v-if="isHsUser() && activeName == 'PLAT'">
              是否曾经通过以下途径反映上述问题：<span
                class="infoListItemInfo"
                >{{ changeStringStyle(caseInfo.onceReflected) }}</span
              >
            </li>
            <li class="infoListItem" v-if="isHsUser() && activeName == 'PLAT'">
              对曾经反映情况进行详细说明：<span class="infoListItemInfo">{{
                changeStringStyle(caseInfo.detailedDescription)
              }}</span>
            </li>
          </ul>
          <case-other
            v-if="editOther"
            @callback="callbackCaseOther"
            :childData="caseInfo"
          />
          <!-- 黄石大冶所在地区驳回 start -->
          <el-dialog
            title="所在地区驳回"
            :visible.sync="dialogVisible"
            :close-on-click-modal="false"
            width="550px"
            :modal-append-to-body="false"
          >
            <el-form
              :model="dialogForm"
              ref="dialogForm"
              :rules="dialogRules"
              label-width="110px"
            >
              <el-form-item
                label="驳回地区级别"
                :label-width="formLabelWidth"
                prop="areaLevel"
              >
                <el-radio-group v-model="dialogForm.areaLevel">
                  <el-radio label="COUNTY">区/县</el-radio>
                  <el-radio label="STREET">街道/镇</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item
                label="建议所在地区"
                :label-width="formLabelWidth"
                prop="proposalAreaId"
              >
                <el-cascader
                  ref="manageArea"
                  v-model="dialogForm.proposalAreaId"
                  :append-to-body="false"
                  :options="areasOptions"
                  clearable
                  filterable
                  :props="{ checkStrictly: true, emitPath: false }"
                ></el-cascader>
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="dialogVisible = false" class="cancel"
                >取消</el-button
              >
              <el-button
                type="primary"
                @click="toSave"
                class="save"
                :loading="canSave"
                >提交</el-button
              >
            </div>
          </el-dialog>
          <!-- 黄石大冶所在地区驳回 end-->

          <!-- 黄石定制化--项目详情 start -->
          <div v-if="isHsUser() && activeName == 'PLAT'">
            <div class="infoTitle">
              <div class="secondaryTitle secondaryTitleTheme">项目详情</div>
              <el-link
                icon="el-icon-edit"
                class="edit"
                type="primary"
                v-if="
                  isShowUpdate &&
                  caseInfo.status == 'ACCEPTING' &&
                  !editProject &&
                  isPush !== 'YES'
                "
                @click="toEditProject"
                >编辑</el-link
              >
            </div>
            <ul class="infoList" v-if="!editProject">
              <li class="infoListItem">
                建设单位名称：<span class="infoListItemInfo">{{
                  changeStringStyle(caseInfo.pcName)
                }}</span>
              </li>
              <li class="infoListItem">
                总承包单位名称：<span class="infoListItemInfo">{{
                  changeStringStyle(caseInfo.generalContractName)
                }}</span>
              </li>
              <li class="infoListItem">
                分包单位名称：<span class="infoListItemInfo">{{
                  changeStringStyle(caseInfo.subContractName)
                }}</span>
              </li>
              <li class="infoListItem">
                是否政府投资项目：
                <span class="infoListItemNull infoListItemInfo">{{
                  caseInfo.isGov || '- -'
                }}</span>
              </li>
            </ul>
            <case-project
              v-if="editProject"
              @callback="callbackCaseProject"
              :childData="caseInfo"
            ></case-project>
          </div>
          <!-- 黄石定制化--项目详情 end -->
        </el-col>

        <el-col :span="15" class="info infoRight">
          <p class="title">处理详情</p>
          <div class="infoTitle">
            <div
              class="secondaryTitle secondaryTitleTheme"
              style="margin: 4px 16px 0 0; display: inline-block"
            >
              当前状态：{{ caseInfo.statusDesc }}
            </div>
            <el-button
              class="saveBtn edit1"
              type="primary"
              v-if="caseInfo.status == 'WAIT_ACCEPT' && isPush !== 'YES'"
              @click="startAction(caseInfo.id, caseInfo.name)"
              >开始受理</el-button
            >
            <el-button
              class="saveBtn edit1"
              type="primary"
              v-if="
                caseInfo.status == 'ACCEPTING' &&
                isPush !== 'YES' &&
                !isHsUser()
              "
              @click="endAction(caseInfo.id, caseInfo.name)"
              >受理结束</el-button
            >
          </div>
          <div style="display: block"></div>
          <div class="infoTitle">
            <div class="secondaryTitle secondaryTitleTheme">
              所属区域 ：<span>
                {{
                  areaId == ''
                    ? '- -'
                    : `${caseInfo.cityName ? caseInfo.cityName : ''}${
                        caseInfo.countyName &&
                        caseInfo.countyName != caseInfo.cityName &&
                        caseInfo.countyName != '-'
                          ? '-' + caseInfo.countyName
                          : ''
                      }${caseInfo.streetName ? '-' + caseInfo.streetName : ''}`
                }}
              </span>
            </div>
            <el-link
              icon="el-icon-edit"
              class="edit"
              type="primary"
              v-if="
                isShowUpdate &&
                caseInfo.status == 'ACCEPTING' &&
                !editDate &&
                isPush !== 'YES'
              "
              @click="toEditDate"
              >编辑</el-link
            >
          </div>
          <el-row class="infoList" v-if="!editDate">
            <el-col :span="12" class="infoListItem">
              所属行业：{{ changeStringStyle(caseInfo.industryName) }}
            </el-col>
          </el-row>
          <case-truth
            v-if="editDate"
            :childData="caseInfo"
            @callback="callbackCaseDate"
          />
          <!-- 黄石办理负责人 start -->
          <div class="infoTitle" v-if="isHsUser()">
            <div class="secondaryTitle secondaryTitleTheme">
              办理负责人<span> </span>
            </div>
            <el-link
              icon="el-icon-edit"
              class="edit"
              type="primary"
              v-if="
                isShowUpdate &&
                caseInfo.status == 'ACCEPTING' &&
                !editResolve &&
                isPush !== 'YES'
              "
              @click="toEditManagerNames"
              >编辑</el-link
            >
          </div>
          <ul class="infoList" v-if="!editManagerNames && isHsUser()">
            <li class="infoListItem">
              办理负责人：
              <span>{{
                caseInfo.complaintManagerNames.join('、') || '- -'
              }}</span>
            </li>
          </ul>
          <!-- v-if="editManagerNames"  -->
          <case-manager-names
            v-if="editManagerNames"
            @callback="callbackManagerNames"
            :childData="caseInfo"
          />
          <!-- 黄石办理负责人 end -->
          <!-- 黄石办结反馈 start-->
          <div
            v-if="
              isHsUser() &&
              caseInfo.status !== 'WAIT_ACCEPT' &&
              isPush !== 'YES'
            "
          >
            <div class="infoTitle">
              <div class="secondaryTitle secondaryTitleTheme">
                办结反馈<span> </span>
              </div>
              <el-link
                icon="el-icon-edit"
                class="edit"
                type="primary"
                v-if="
                  isShowUpdate &&
                  caseInfo.status == 'ACCEPTING' &&
                  !editResolve &&
                  isPush !== 'YES'
                "
                @click="toEditFinish"
                >编辑</el-link
              >
            </div>
            <ul class="infoList" v-if="!editFinish && isHsUser()">
              <li class="infoListItem">
                核处结论：
                <span>{{
                  changeStringStyle(caseInfo.verifyConclusionDesc)
                }}</span>
              </li>
              <li class="infoListItem">
                核实处理情况：
                <span>{{ changeStringStyle(caseInfo.verifyProcessing) }}</span>
              </li>
            </ul>
            <case-finish
              @callback="callbackCaseFinish"
              :childData="caseInfo"
              v-if="editFinish"
            ></case-finish>
          </div>

          <!-- 黄石办结反馈 end-->
          <!-- 其他地区用解决情况模块 -->
          <div
            v-if="
              !isHsUser() ||
              (isHsUser() &&
                (caseInfo.finishType ||
                  caseInfo.involveCount ||
                  caseInfo.involveTotal))
            "
          >
            <div class="infoTitle">
              <div class="secondaryTitle secondaryTitleTheme">解决情况</div>
              <el-link
                icon="el-icon-edit"
                class="edit"
                type="primary"
                v-if="
                  !isHsUser() &&
                  isShowUpdate &&
                  caseInfo.status == 'ACCEPTING' &&
                  !editResolve &&
                  isPush !== 'YES'
                "
                @click="toEditResolve"
                >编辑</el-link
              >
            </div>

            <el-row class="infoList" v-if="!editResolve">
              <el-col :span="12" class="infoListItem infoListItemRequired">
                是否解决：{{ resolveStatus }}
              </el-col>
              <el-col :span="12" class="infoListItem">
                解决方式：{{ changeStringStyle(caseInfo.finishType) }}
              </el-col>
              <el-col :span="12" class="infoListItem infoListItemRequired">
                涉及人数：{{ changeStringStyle(caseInfo.involveCount) }}
              </el-col>
              <el-col :span="12" class="infoListItem infoListItemRequired">
                涉及金额：{{ changeStringStyle(caseInfo.involveTotal) }}
              </el-col>
            </el-row>
            <case-resolve
              @callback="callbackCaseResolve"
              :childData="caseInfo"
              v-if="editResolve"
            />
          </div>
          <div class="infoTitle">
            <div class="secondaryTitle secondaryTitleTheme">办理进展记录</div>
          </div>
          <div class="infoList" style="padding-left: 16px">
            <div class="infoListTitles">
              填写办理进展，包括联系投诉人、上门核查、调查、组织协调等。
            </div>
            <el-input
              class="infoListInput"
              :rows="4"
              type="textarea"
              :disabled="
                !isShowUpdate ||
                caseInfo.isRepeatAppeal === 'YES' ||
                caseInfo.status !== 'ACCEPTING' ||
                isPush === 'YES'
              "
              placeholder="请填写办理进展"
              v-model="progressContent"
            ></el-input>
            <el-button
              :type="
                !isShowUpdate ||
                caseInfo.isRepeatAppeal === 'YES' ||
                caseInfo.status !== 'ACCEPTING'
                  ? 'info'
                  : 'primary'
              "
              :class="
                !isShowUpdate ||
                caseInfo.isRepeatAppeal === 'YES' ||
                caseInfo.status !== 'ACCEPTING'
                  ? 'commonBut dosabledBtn'
                  : 'saveBtn commonBut'
              "
              :disabled="
                !isShowUpdate ||
                caseInfo.isRepeatAppeal === 'YES' ||
                caseInfo.status !== 'ACCEPTING' ||
                isPush === 'YES'
              "
              :loading="isLoading"
              @click="addAppealProgress"
              >添加进展</el-button
            >
          </div>
          <div class="infoTitle">
            <div class="secondaryTitle secondaryTitleTheme">办理进展</div>
          </div>
          <div class="infoList">
            <div>
              <el-steps
                direction="vertical"
                v-if="appealProgressList.length > 0"
              >
                <el-step
                  v-for="(item, index) in appealProgressList"
                  :key="item.id"
                  :title="`操作时间：${item.createTime}`"
                >
                  <span
                    slot="description"
                    v-if="index == 0 && caseInfo.status == 'ACCEPTED'"
                    >受理完成</span
                  >
                  <span
                    slot="description"
                    v-if="index < appealProgressList.length - 1"
                    >{{ item.progressContent }}</span
                  >
                  <span slot="description" v-else>提报信息</span>
                </el-step>
              </el-steps>
              <span v-else class="noDataTip">暂无进展记录</span>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script>
import caseFiled from './esCaseFiled'
import caseType from './esCaseTypeComp'
import caseDepartment from './esCaseDepartment'
import CasePerson from './esCasePerson'
import CaseBase from './esCaseBase'
import CaseOther from './esCaseOther'
import CaseTruth from './esCaseTruth'
import CaseResolve from './esCaseResolve'
import CaseManagerNames from './esCaseManagerNames'
import CaseProject from './esCaseProject.vue'
import caseFinish from '@/components/unpaidComplaint/caseFinish'
export default {
  name: 'caseDetail',
  components: {
    caseFiled,
    caseType,
    caseDepartment,
    CasePerson,
    CaseBase,
    CaseOther,
    CaseTruth,
    CaseResolve,
    CaseManagerNames,
    CaseProject,
    caseFinish,
  },
  data() {
    return {
      areasOptions: [],
      activeName: '',
      id: '',
      type: '',
      isPush: '',
      caseInfo: {
        complaintManagerNames: [],
      },
      isLoading: false,
      editFiled: false,
      editType: false,
      editDepartment: false,
      editPerson: false,
      editBase: false,
      editOther: false,
      editDate: false,
      editResolve: false,
      showTask: false,
      showPerson: false,
      progressContent: '',
      appealProgressList: [],
      isShowUpdate: false,
      // 黄石大冶所在地区驳回
      dialogVisible: false,
      dialogForm: {
        areaLevel: '',
        proposalAreaId: '',
      },
      dialogRules: {
        areaLevel: [
          { required: true, message: '驳回地区级别不能为空', trigger: 'blur' },
        ],
      },
      canSave: false,
      editManagerNames: false,

      editProject: false,
      editFinish: false,
    }
  },
  mounted() {
    this.isShowUpdate =
      this.$store.state.buttonLimitsArr.indexOf('esCaseList:update') > -1 ||
      this.$store.state.buttonLimitsArr.indexOf('hsCaseListTab:update') > -1 ||
      this.$store.state.buttonLimitsArr.indexOf('hsMyResponsibleTab:update') >
        -1

    this.id = this.$route.query.id
    this.type = this.$route.query.type
    this.isPush = this.$route.query.isPush
    this.activeName = this.$route.query.activeName
    this.getCaseDetail(this.id)
    //获取区域
    if (this.isHsUser()) {
      this.getAreaList(4202)
    } else {
      this.getAreaList(this.$store.state.areaInfoArr.areaId)
    }
  },
  computed: {
    resolveStatus() {
      if (this.caseInfo.isFinish == 'YES' || this.caseInfo.isFinish == '是') {
        return '已办结'
      } else {
        return '否'
      }
    },
  },
  methods: {
    changeStringStyle(str) {
      if (str == '--' || str == '' || str == null || str == undefined) {
        return '- -'
      } else {
        return str
      }
    },
    calcColor(row) {
      let colorStr = ''
      if (!row.createTime) return
      let createTime = new Date(row.createTime + ' 00:00:00').getTime()
      let nowDate = new Date().toLocaleDateString()
      let now = new Date(nowDate).getTime()
      if (row.status === 'ACCEPTED') {
        colorStr = 'GREEN'
      } else {
        if (now - createTime <= 30 * 24 * 60 * 60 * 1000) {
          colorStr = 'GREEN'
        }
        if (
          now - createTime > 30 * 24 * 60 * 60 * 1000 &&
          now - createTime <= 60 * 24 * 60 * 60 * 1000
        ) {
          colorStr = 'YELLOW'
        }
        if (now - createTime > 60 * 24 * 60 * 60 * 1000) {
          colorStr = 'RED'
        }
      }
      return colorStr
    },
    //开始受理
    startAction(id, user) {
      const h = this.$createElement
      this.$msgbox({
        title: '提示',
        message: h('p', { style: 'position:relative;padding-left:40px' }, [
          h('i', {
            class: 'el-icon-warning',
            style:
              'position:absolute;left:5px;top: 2px;color: orange;font-size:22px;margin-right:15px',
          }),
          h('span', `修改受理状态为【办理中】后，将短信通知${user}受理状态。`),
        ]),
        showCancelButton: true,
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        beforeClose: (action, instance, done) => {
          if (action === 'confirm') {
            instance.confirmButtonLoading = true
            instance.confirmButtonText = '执行中...'
            this.axios
              .post('api-r/rightbackpay/expand/editstatus', { id })
              .then((res) => {
                if (!res.data.hasError) {
                  this.$message({
                    type: 'success',
                    message: '操作成功',
                  })
                  this.getCaseDetail(id)
                  done()
                  setTimeout(() => {
                    instance.confirmButtonLoading = false
                    instance.confirmButtonText = '确定'
                  }, 300)
                } else {
                  this.$message({
                    type: 'warning',
                    message: res.data.errorMsg,
                  })
                  done()
                }
              })
          } else {
            done()
          }
        },
      }).catch(() => {})
    },
    //已办结
    endAction(id, user) {
      const h = this.$createElement
      this.$msgbox({
        title: '提示',
        message: h('p', { style: 'position:relative;padding-left:40px' }, [
          h('i', {
            class: 'el-icon-warning',
            style:
              'position:absolute;left:5px;top: 2px;color: orange;font-size:22px;margin-right:15px',
          }),
          h('span', `修改受理状态为【已办结】后，将短信通知${user}受理状态。`),
        ]),
        showCancelButton: true,
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        beforeClose: (action, instance, done) => {
          if (action === 'confirm') {
            this.axios
              .post('api-r/rightbackpay/expand/editstatus', { id })
              .then((res) => {
                if (!res.data.hasError) {
                  this.$message({
                    type: 'success',
                    message: '操作成功',
                  })
                  this.getCaseDetail(id)
                  done()
                } else {
                  this.$message({
                    type: 'warning',
                    message: res.data.errorMsg,
                  })
                  done()
                }
              })
          } else {
            done()
          }
        },
      }).catch(() => {})
    },
    /**
     * @name: 获取欠薪投诉详情
     * @param {string} id
     * @Author: 471826078@qq.com
     */
    getCaseDetail(id) {
      this.axios
        .post('api-r/rightbackpay/expand/findbyid', { id })
        .then((res) => {
          if (!res.data.hasError) {
            this.caseInfo = res.data.result
            if (!this.caseInfo.complaintManagerNames) {
              this.caseInfo.complaintManagerNames = []
            }
            this.getAppealProgressList(id)
          } else {
            this.$message({
              type: 'warning',
              message: res.data.errorMsg,
            })
          }
        })
    },
    goBackOne() {
      var url
      if (this.$route.query.isMyResponsibleLzh === 'myResponsibleLzh') {
        url = '/home/unpaidComplaint/myResponsibleLzh'
      } else if (this.isHsUser() && this.$route.query.myResponsibleHS) {
        url = '/home/unpaidComplaint/hsMyResponsibleTab'
      } else if (
        this.isHsUser() &&
        this.$route.query.myResponsibleHS == undefined
      ) {
        url = '/home/unpaidComplaint/hsCaseListTab'
      } else {
        url = '/home/unpaidComplaint/esCaseList'
      }
      this.$router.push({
        path: url,
        query: {
          activeName: this.$route.query.activeName
            ? this.$route.query.activeName
            : '',
        },
      })
      this.$store.commit('CHANGE_SLIDER_NAME', {
        oldUrl: url,
        newUrl: this.$router.currentRoute.fullPath,
      })
    },
    toEditFiled() {
      this.editFiled = true
    },
    callbackCaseFiled(val) {
      this.editFiled = false
      if (val.success) {
        this.getCaseDetail(this.id)
      }
    },
    /**
     * @name: 编辑诉求类型
     * @param {*}
     * @Author: 471826078@qq.com
     */
    toEditType() {
      this.editType = true
    },
    callbackCaseType(val) {
      this.editType = false
      if (val.success) {
        this.getCaseDetail(this.id)
      }
    },
    /**编辑投诉单位
     * @name:
     * @param {*}
     * @Author: 471826078@qq.com
     */
    toEditDepartment() {
      this.editDepartment = true
    },
    callbackDepartment(val) {
      this.editDepartment = false
      if (val.success) {
        this.getCaseDetail(this.id)
      }
    },
    /**
     * @name:
     * @param {*}
     * @Author: 471826078@qq.com
     */
    toEditPerson() {
      this.editPerson = true
    },

    callbackCasePerson(val) {
      this.editPerson = false
      if (val.success) {
        this.getCaseDetail(this.id)
      }
    },
    toEditBase() {
      this.editBase = true
    },
    callbackCaseBase(val) {
      this.editBase = false
      if (val.success) {
        this.getCaseDetail(this.id)
      }
    },
    toEditOther() {
      this.editOther = true
    },
    callbackCaseOther(val) {
      this.editOther = false
      if (val.success) {
        this.getCaseDetail(this.id)
      }
    },
    /**
     * @name:
     * @param {*}
     * @Author: 471826078@qq.com
     */
    toEditDate() {
      this.editDate = true
    },
    callbackCaseDate(val) {
      this.editDate = false
      if (val.success) {
        this.getCaseDetail(this.id)
      }
    },
    /**
     * @name:
     * @param {*}
     * @Author: 471826078@qq.com
     */
    toEditResolve() {
      this.editResolve = true
    },
    callbackCaseResolve(val) {
      this.editResolve = false
      if (val.success) {
        this.getCaseDetail(this.id)
      }
    },
    /**
     * @name: 黄石编辑项目信息
     * @param {*}
     * @Author: 471826078@qq.com
     */
    toEditProject() {
      this.editProject = true
    },
    callbackCaseProject(val) {
      this.editProject = false
      if (val.success) {
        this.getCaseDetail(this.id)
      }
    },
    toEditFinish() {
      this.editFinish = true
    },
    callbackCaseFinish(val) {
      this.editFinish = false
      if (val.success) {
        this.getCaseDetail(this.id)
      }
    },
    /**
     * @name: 地区任务分发相关
     * @param {*}
     * @Author: 471826078@qq.com
     */
    openTaskDialog() {
      this.showTask = true
    },
    handleCloseArea(val) {
      this.showTask = false
      if (val.success) {
        this.getCaseDetail(this.id)
      }
    },
    /**
     * @name: 指定责任人相关方法
     * @param {*}
     * @Author: 471826078@qq.com
     */
    openPersonDialog() {
      this.showPerson = true
    },
    handleClosePerson(val) {
      this.showPerson = false
      if (val.success) {
        this.getCaseDetail(this.id)
      }
    },
    /**
     * @name: 添加办理进展记录 BY WangLinFenf
     * @param {string} rightsId
     * @param {string} progressContent  欠薪诉求处理进展信息
     * @Author: 471826078@qq.com
     */
    addAppealProgress() {
      const { id, progressContent } = this
      if (progressContent.length == 0) {
        this.$message({
          type: 'warning',
          message: '请输入办理进展详情',
        })
        return false
      }
      this.isLoading = true
      this.axios
        .post('api-r/rightbackpayprogress/expand/add', {
          rightsId: id,
          progressContent,
        })
        .then((res) => {
          if (!res.data.hasError) {
            this.$message({
              type: 'success',
              message: '添加成功',
            })
            this.progressContent = ''
            this.getAppealProgressList(id)
          } else {
            this.$message({
              type: 'warning',
              message: res.data.errorMsg,
            })
          }
          setTimeout(() => {
            this.isLoading = false
          }, 1000)
        })
    },
    /**
     * @name: 查询办理进展列表接口 BY WangLinFenf
     * @param {*}
     * @Author: 471826078@qq.com
     */
    getAppealProgressList(id) {
      this.axios
        .post('api-r/rightbackpayprogress/expand/list', { rightsId: id })
        .then((res) => {
          if (!res.data.hasError) {
            this.appealProgressList = res.data.result
          } else {
            this.$message({
              type: 'warning',
              message: res.data.errorMsg,
            })
          }
        })
    },
    // 黄石大冶重新分配地区
    getAreaList(areaId) {
      this.axios({
        method: 'post',
        data: {
          areaId,
        },
        url: 'api-bs/areadic/base/depdetailbyareaid',
      })
        .then(
          (response) => {
            if (!response.data.hasError) {
              this.areasOptions = response.data.result
            } else {
            }
          },
          (response) => {}
        )
        .catch((error) => {})
    },
    changeArea() {
      this.dialogVisible = true
      this.$nextTick(function () {
        this.$refs['dialogForm'].clearValidate()
      })
    },
    toSave() {
      this.$refs.dialogForm.validate((valid) => {
        if (valid) {
          this.canSave = true
          this.save()
        } else {
          return false
        }
      })
    },
    save() {
      var proposalAreaName = ''

      if (this.$refs['manageArea'].getCheckedNodes()[0]) {
        var proposalAreaName = this.$refs['manageArea']
          .getCheckedNodes()[0]
          .pathLabels.join('-')
      }

      this.axios({
        method: 'post',
        url: 'api-r/rightbackpay/expand/edit',
        data: {
          id: this.id,
          areaLevel: this.dialogForm.areaLevel,
          proposalAreaId: this.dialogForm.proposalAreaId,
          proposalAreaName: proposalAreaName,
        },
      })
        .then((response) => {
          this.canSave = false
          if (!response.data.hasError) {
            //保存成功
            this.$message({
              type: 'success',
              message: response.data.msg || '修改成功',
            })
            this.dialogVisible = false
            this.getCaseDetail(this.id)
          } else {
            this.$message({
              type: 'error',
              message: response.data.errorMsg,
            })
          }
        })
        .catch((error) => {
          this.canSave = false
        })
    },
    // 编辑负责人
    toEditManagerNames() {
      this.editManagerNames = true
    },
    callbackManagerNames(val) {
      this.editManagerNames = false
      if (val.success) {
        this.getCaseDetail(this.id)
      }
    },
  },
}
</script>
<style lang="less" scoped>
.topTitle {
  // background: #e4ebf1;
  height: 85px;
  padding: 16px 0px;
  position: relative;
  h2 {
    vertical-align: middle;
    font-weight: bold;
    font-size: 18px;
    color: #333333;
    .iconfanhui1 {
      font-size: 20px;
      margin-right: 6px;
      cursor: pointer;
    }
    span {
      font-weight: normal;
      display: inline-block;
      padding: 0 6px;
      height: 20px;
      line-height: 20px;
      font-size: 12px;
      text-align: center;
      color: #fff;
      margin-left: 12px;
      position: absolute;
      top: 2px;
    }
    .during {
      background: #ffac37;
    }
    .finished {
      background: #009588;
    }
    .actioning {
      background: #0f76c4;
    }
    .reRecord {
      background: #999;
    }
    .reRecordTip {
      font-size: 14px;
      color: #666666;
      width: auto;
    }
  }
  &Info {
    line-height: 14px;
    font-size: 14px;
    margin-top: 10px;
    color: #666666;
    li {
      display: inline-block;
      margin-right: 30px;
      position: relative;
      margin-left: 28px;
    }
  }
  .btn {
    position: absolute;
    top: 26px;
    right: 24px;
    width: 136px;
    height: 36px;
    line-height: 36px;
    border: 1px solid #009588 !important;
    border-radius: 21px;
    font-size: 14px;
    color: #009588 !important;
    text-align: center;
    background: #e4ebf1;
    padding: 0;
  }
  .btn:hover {
    background: rgba(0, 149, 136, 0.1) !important;
  }
  .dateShow {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 240px;
    height: 32px;
    line-height: 32px;
    font-size: 14px;
    color: #009588;
    text-align: center;
    padding: 0;
  }
  .topTitleBox {
    position: relative;
    margin: 0 24px;
  }
}
.mainCon {
  top: 230px;
  padding: 0;
}
.infoLeft {
  padding-top: 24px;
  padding-bottom: 24px;
  padding-right: 24px;
  border-right: 10px solid #f5f7fa;

  padding-left: 24px;
  .title {
    font: bold 18px Microsoft YaHei;
    color: #333333;
  }
}
.infoRight {
  padding-top: 24px;
  padding-left: 24px;
  padding-right: 24px;
  position: relative;
  .title {
    font: bold 18px Microsoft YaHei;
    color: #333333;
  }
  &::before {
    content: '';
    width: 10px;
    background-color: #f5f7fa;
    position: absolute;
    top: 0;
    bottom: 0;
    left: -10px;
  }
}
.info {
  background-color: #fff;
  height: calc(100%);
  &TopTip {
    margin-top: 15px;
    height: 30px;
    line-height: 30px;
    vertical-align: middle;
    background-color: #fffbe6;
    // color: red;
    font-size: 14px;
    position: relative;
    &::before {
      width: 24px;
      height: 30px;
      content: '';
      background-color: #fffbe6;
      position: absolute;
      top: 0;
      left: -24px;
    }
    &::after {
      width: 24px;
      height: 30px;
      content: '';
      background-color: #fffbe6;
      position: absolute;
      top: 0;
      right: -24px;
    }
    .el-icon-warning {
      vertical-align: middle;
    }
  }
  &Title {
    // height: 35px;
    // line-height: 35px;
    margin-top: 20px;
    position: relative;
    .edit {
      position: absolute;
      right: 15px;
      top: 0px;
      height: 20px;
    }
    .edit1 {
      margin-left: 15px;
      padding: 6px 10px;
    }

    .text {
      display: inline-block;
      color: #333;
      line-height: 20px;
      height: 20px;
      border-left: 4px solid #009588;
      padding-left: 15px;
      font: bold 16px Microsoft YaHei;
    }
  }
  &List {
    padding: 5px 0;
    &Item {
      padding-left: 16px;
      line-height: 30px;
      font-size: 14px;
      color: #333;

      /deep/.el-link {
        height: 30px;
        vertical-align: top;
        &--inner {
          height: 26px !important;
          line-height: 26px;
        }
      }
    }
    .edit1 {
      margin-left: 15px;
      padding: 6px 10px;
    }
    // 修改步骤条样式
    /deep/ .el-steps {
      .el-step__icon.is-text {
        border: none;
        background-color: #eee;
        border-radius: 50%;
        width: 10px;
        height: 10px;
      }
      .el-step__icon-inner {
        display: none;
      }
      .el-step__line {
        background-color: #eee;
        left: 4px !important;
        top: 9px !important;
        bottom: -8px !important;
      }
      .el-step__title {
        font-size: 12px;
        color: #999;
      }
      .el-step__description {
        margin-bottom: 15px;
        font-size: 14px;
        color: #444;
      }
    }
    .infoListTitles {
      font-size: 14px;
      color: #999;
    }
    .infoListInput {
      margin: 15px 0;
    }
  }
}
.noDataTip {
  line-height: 26px;
  font-size: 14px;
  color: #666;
}
.commonBut {
  width: 90px !important;
}
.dot {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
}
.green {
  background: rgb(4, 151, 138);
}
.yellow {
  background: rgb(246, 155, 34);
}
.red {
  background: rgb(218, 4, 29);
}
@import '../../../static/css/filterArea.less';

.caseComp {
  margin-top: 20px;
}

/deep/.el-step__main {
  width: calc(100%);
}
.infoListItemInfo {
  color: #666;
}
</style>
